<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <Dept :height="props.height" :multiple="false" @select-single="onSelectDept" />
    </n-gi>
    <n-gi>
      <Position :height="props.height" :multiple="false" @select-single="onSelectPosition" />
    </n-gi>
  </n-grid>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { NGi, NGrid } from 'naive-ui'
  import Dept from './Dept.vue'
  import Position from './Position.vue'

  const props = defineProps<{ height: number }>()
  const emits = defineEmits(['select'])

  const state = reactive({ dept: {} as any, position: {} as any })

  const onSelectDept = (data: any) => {
    state.dept = data
    emits('select', [{ id: getExp() }])
  }
  const onSelectPosition = (data: any) => {
    state.position = data
    emits('select', [{ id: getExp() }])
  }
  const getExp = () => {
    const exp =
      "${flowCandidateUsers.getByDeptPosition('" +
      state.dept.deptId +
      "','" +
      state.position.positionId +
      "')}"
    console.log(exp)
    return exp
  }
</script>

<style lang="scss" scoped></style>
